{% extends 'base.html' %}

{% block header %}
	<style>
		.toggler { width: 500px; height: 200px; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
		a:hover{text-decoration:none;} 
		a{text-decoration:none;} 

	</style>

	<script>
	$(function(){

	$( ".section" ).click(function() {
			$(this).parent().next().toggle( );
			return false;
		});

	});
	</script>

{% endblock %}

{% block content %}

	<div id="sections" class="texto">
		<div class="titulo">
			En esta p&aacute;gina, usted podr&aacute; encontrar la respuesta a las preguntas m&aacute;s
			variadas acerca de nuestro sistema.
		</div>
		<p>Primero, elija uno de los siguientes temas:</p>
	
		{% regroup questions by section as section_list %}
		
		{% for s in section_list %}
			<ul>
				<a href="#" id="section-{{s.grouper.id}}" class="section texto_links">
					{{s.grouper}}
				</a>
			</ul>
			<div id="questions-{{s.grouper.id}}" style="display:none;">
				{% for q in s.list %}
					<ul>
						<h3 class="titulo">{{q.question}}</h3>
						<p align="justify">{{q.answer|safe}}</p>
					</ul>
				{% endfor %}
			</div>
		{% endfor %}
			

	</div>

{% endblock %}
